/**Created by Administrator on 2016/7/14.*/
//页面加载完成
window.onload=function(){
    //搜索效果
    search();
    //轮播图
    banner();
    //倒计时
    downTiime();

}

//搜索效果
function search(){
    //1默认透明
    //2滑动页面的时候颜色逐渐加深或变浅
    //3往下滑动到一定距离的时候颜色不改变（过了轮播图）

    //获取相关dom
    //搜索盒子
    var search=document.querySelector(".jd_header_box");
    //轮播图
    var banner=document.querySelector(".jd_banner");
    //获取高度
    var height=banner.offsetHeight;

    //监听页面滑动
    window.onscroll=function(){
        //监听是否滑动超过了banner的高度
        //获取页面在距离顶部的高度
        var top=document.body.scrollTop//谷歌上的写法 IE：document.documentElement.scrollTop

        //定义透明度
        var opacity=0;

        if(top>height){
            opacity=0.85;
        }else {
            //透明度的变化
            opacity=0.85*(top/height);
        }

        search.style.background=("rgba(201,21,35,"+opacity+")");
    }
}


//轮播图
function banner(){
    //1图片自动无缝轮播 过渡 定时
    //2点需要做对应的改变    改变当前样式
    //3手指触摸滑动的时候轮播图也能随着滑动。停止轮播  touch事件 clear定时器
    //4不超过一定的距离需要吸附回去   过渡
    //5超过一定的距离需要跳转上一张或者下一张  过渡

   //获取dom元素
    //大盒子
    var banner=document.querySelector(".jd_banner");
    //盒子的宽度
    var width=banner.offsetWidth;
    //图片盒子
    var imageBos=banner.querySelector("ul:first-child");
    //点盒子
    var pointBox=banner.querySelector("ul:nth-child(2)");
    //所有的点
    var points=pointBox.querySelectorAll("li");

    //公用方法
    //加过渡
    var addTransition=function(){
        imageBos.style.webkitTransition="all 0.5s";
        imageBos.style.transition="all 0.5s";
    }
    //清除过度
    var removeTtansition=function(){
        imageBos.style.weblitTransition="none";
        imageBos.style.transition="none";
    }
    //定位
    var setTranslateX=function(translateX){
        imageBos.style.webkitTransform="translateX("+translateX+"px)";
        imageBos.style.transform="translateX("+translateX+"px)";
    }

    //功能代码

    //1自动无缝轮播
    //默认索引
    var index=1;
    //定时器
    var timer=setInterval(function(){
        index++;
        //定位图片盒子    过渡形式来定位
        //过渡
       addTransition();
        //定位
        setTranslateX(-index*width);
    },2000)


    //监听过渡结束
    libin.transactionEnd(imageBos,function(){
        //无缝滚动
        if(index>=9){
            index=1;
            //清除过渡
            removeTtansition();
            //定位
            setTranslateX(-index*width);
        }else if(index<=0){
            index=8;
            //清除过渡
            removeTtansition();
            //定位
            setTranslateX(-index*width);
        };

        //index一直保持在1-8
        setPoint();
    });


    //2点需要做对应的改变    改变当前样式
    var setPoint=function(){
        //通过index判断
        //清除所有样式
        for(var i=0;i<points.length;i++){
            points[i].classList.remove("now");
        }
        //给对应的加上样式
        points[index-1].classList.add("now")
    }

    //3手指触摸滑动的时候轮播图也能随着滑动。停止轮播  touch事件 clear定时器
    //记录一些东西
    var startX=0;
    var moveX=0;
    var endX=0;
    var distanceX=0;//改变的距离

    var isMove=false;//是否滑动

    imageBos.addEventListener("touchstart",function(e){
        //记录开始位置的坐标
        startX= e.touches[0].clientX;
        //清除计时器
        clearInterval(timer);
    })
    imageBos.addEventListener("touchmove",function(e){
        //记录滑动时候的坐标 会随时改变
        moveX= e.touches[0].clientX;
        //计算滑动的距离   可以为负也可以为正
        distanceX=moveX-startX;
        //在滑动的时候轮播图也需要滑动，定位的方式
        //清除过渡
        removeTtansition();
        //定位
        setTranslateX(-index*width+distanceX)//当前的定位加上改变的距离

        isMove=true;
    })
    //模拟触摸最好使用window监听
    imageBos.addEventListener("touchend",function(e){

        if(Math.abs(distanceX)>width/3 && isMove){
            //5超过一定的距离需要跳转上一张或者下一张  过渡
            if(distanceX>0){
                index--;//上一张
            }else {
                index++;//下一张
            }
            //加过渡
            addTransition();
            //定位
            setTranslateX(-index*width);
        }else {
            //4不超过一定的距离需要吸附回去   过渡
            //加过渡
            addTransition();
            //定位
            setTranslateX(-index*width);
        }
        //重置参数
        startX=0;
        moveX=0;
        distanceX=0;
        isMove=false;



        //加上定时器
        //严谨起见。防止计时器累加
        clearInterval(timer);
        timer=setInterval(function(){
            index++;
            //定位图片盒子    过渡形式来定位
            //过渡
            addTransition();
            //定位
            setTranslateX(-index*width);
        },2000)
    })



}


//倒计时
function downTiime(){
    //1需要倒计时的时间
    //2每一秒改变6个盒子的内容

    //获取dom
    var skTime=document.querySelector(".sk_time");
    //每一个span
    var spans=skTime.querySelectorAll("span");

    //假设一个时间
    var time=4*60*60;

    var timer=setInterval(function(){
        time--;
        //时间必须大于0
        if(time<0){
            return false;
        }

        //格式化时间
        var  h=Math.floor(time/3600);
        var m=Math.floor(time%3600/60);
        var s=time%60;

        //操作dom
        spans[0].innerHTML=Math.floor(h/10);
        spans[1].innerHTML=h%10;
        spans[3].innerHTML=Math.floor(m/10);
        spans[4].innerHTML=m%10;
        spans[6].innerHTML=Math.floor(s/10);
        spans[7].innerHTML=s%10;


    },1000)

}